
<template>
  <div class="supply-info-container-edit">
    <div class="supply-nature">
      <span>客户性质</span>
      <el-radio-group v-model="editSupplyInfo.companyNature"  disabled >
        <el-radio label="A" >品牌方</el-radio>
        <el-radio label="B" >供应商</el-radio>
        <el-radio label="C" >品牌方/供应商</el-radio>
        <el-radio label="D" >平台</el-radio>
        <el-radio label="E" >客户</el-radio>
      </el-radio-group>
    </div>
    <div class="supply-info">
      <div class="info">
        <i class="iconfont" style="color:#FF8640;margin-left: 10px; ">&#xe621;</i>
        <span>基本信息</span>
      </div>
      <div class="supply-info-fileds">
        <el-form  ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-row>
            <el-col :span="7">
              <el-form-item label="供应商名称">
                <el-input v-model="editSupplyInfo.companyName" ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="组织机构代码">
                <el-input v-model="editSupplyInfo.organizationCode"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="13">
              <el-form-item label="公司地址">
                <v-distpicker  @province="onChangeProvince" @city="onChangeCity" @area="onChangeArea" :province="editSupplyInfo.companyProvince" :city="editSupplyInfo.companyCity" :area="editSupplyInfo.companyDistrict"></v-distpicker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="详细地址"  class="address">
            <el-input v-model="editSupplyInfo.companyAddress"   style="width:50%;"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="supply-List">
      <div class="info">
        <i class="iconfont" style="color:#FF8640;margin-left: 10px; ">&#xe66f;</i>
        <span>联系信息<a style="font-size:13px;margin-left: 15px;">(注：第一条为默认选中)</a></span>
      </div>

      <v-table :tableParams="tableParams" v-on:handleOperation="handleOperation" @getTemplateRow="getTemplateRow"></v-table>
      <div class="btn">
        <el-button circle icon="el-icon-plus" size="mini" type="warning"  @click="addContact"></el-button><span style="color:#ff8c42;font-size: 14px;">添加联系信息</span>
      </div>
    </div>
    <div class="supply-Account">
      <div class="info">
        <i class="iconfont" style="color:#40FF70;margin-left: 10px; ">&#xe695;</i>
        <span>注册信息</span>
      </div>
      <el-form   ref="supplyForm" label-width="100px" class="demo-ruleForm">
        <el-row>
          <el-col :span="8">
            <el-form-item label="开户行名称" >
              <el-input v-model="editSupplyInfo.bankAccountName" ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="开户行账号">
              <el-input v-model="editSupplyInfo.bankAccountNumber"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="纳税号" >
              <el-input v-model="editSupplyInfo.registrationCode"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <el-dialog
      :visible.sync="dialogFormVisible"
      width="40%">
      <div slot="title">
        {{dialogTitle}}
      </div>
      <v-form :formProps="searchForm" ref="form"
              v-on:handleReset="handleReset"
              v-on:coverFormData="coverFormData">
      </v-form>

    </el-dialog>
    <div class="supply-card">
      <div class="info">
        <i class="iconfont" style="color:#4FA1D9;margin-left: 10px; ">&#xe691;</i>
        <span>公司三证图片上传</span>
      </div>
      <div class="supply-upload">
        <el-upload
          action="https://jsonplaceholder.typicode.com/posts/"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove">
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
      </div>
    </div>
    <div class="supply-btn">
      <el-button size="medium" type="primary" @click="saveSupplierInfo">保存</el-button>
      <el-button size="medium" @click="cancelSupplyAdd">取消</el-button>
    </div>
  </div>
</template>
<script>
  import { regionData,CodeToText } from 'element-china-area-data'
  import SplitVertical from "components/common/SplitVertical"
  import VForm from "components/common/VForm"
  import VButton from "components/common/VButton"
  import VTable from "components/common/PageTable/VTable"
  import VDistpicker from 'v-distpicker'
  import {localStorage} from 'js/localStorage'
  export default{
    components:{
      VTable,VForm,SplitVertical,VButton,VDistpicker
    },
    data(){
      return {
        //图片
        dialogImageUrl:[],
        dialogVisible: false,
        //省市区
        options: regionData,
        selectedOptions: [],
        //弹窗
        dialogFormVisible:false,

        dialogTitle:'新增联系人信息',
        id:'',
        userId:'',
        editSupplyInfo:{},
        tableParams: {
          showDefault: true,
          dataArray: [],
          showMultiSelection: false,
          columnArray: [
            {label: '联系人', prop: 'contactName', sortable: false},
            {label: '联系电话', prop: 'contactMobile', sortable: false},
            {label: '公司电话', prop: 'contactPhone', sortable: false},
            {label: '职位', prop: 'contactPosition', sortable: false},
            {label: '微信', prop: 'contactWeChat', sortable: false},
            {label: '邮箱', prop: 'contactEmail', sortable: false},
          ],
          rowHandle:{
            view:{
              show:false
            }
          }

        },
        searchForm: {
          col: 2,
          labelWidth: '100px',
          formItemArray: [{
            label: '联系人',
            prop: 'contactName',
            placeholder: "请选择",
            rules: [{required: true, message: '请输入联系人', trigger: 'blur'}],
            value:""
          }, {
            label: '联系人职位',
            prop: 'contactPosition',
            placeholder: "请输入",
            rules: [{required: true, message: '请输入联系人职位', trigger: 'blur'}],
            value:""
          },{
            label: '手机号码',
            prop: 'contactMobile',
            placeholder: "请输入",
            rules: [{required: true, message: '请输入手机号码', trigger: 'change'},
              {min: 11, max: 11, message: '请输入正确的手机号', trigger: 'blur'}],
            value:""
          },{
            label: '电话号码',
            prop: 'contactPhone',
            placeholder: "请输入",
            value:""
          },{
            label: '微信',
            prop: 'contactWeChat',
            placeholder: "请输入",
            value:""
          },{
            label: 'QQ',
            prop: 'contactQq',
            placeholder: "请输入",
            value:""
          },{
            label: '传真号码',
            prop: 'faxNumber',
            placeholder: "请输入",
            value:""
          }, {
              label: '联系人邮箱',
              prop: 'contactEmail',
              placeholder: "请输入",
              value:""
            }
          ]
        },
        row:{},
        addContactData:{},
        action:'',
        formRow:{}

      }
    },
    mounted(){
      this.userId=localStorage.get('userID')
      this.id=this.$route.query.id
      this.getInfo()
    },
    methods:{
      getInfo(){
        let parmas={
          id:this.id
        }
        let success=data=>{
          if(data.code='statusCode'){
            this.editSupplyInfo=data.body
            this.tableParams.dataArray=data.body.contactInfos
          }else{
            this.$message.error(data.msg)
          }
        }
        this.api.supplierGetOne(parmas,success)
      },
      handleReset(formName) {
        this.$refs.form.resetForm(formName);
      },
      coverFormData(data) {
        this.addContactData=data;
        this.addContactData['setDefault']=false
        if(this.action !== "edit"){
          this.tableParams.dataArray.push(this.addContactData)

          if(this.tableParams.dataArray.length  == 1){
            this.tableParams.dataArray[0].setDefault=true
          }
        }else{
          //替换
          this.tableParams.dataArray = this.tableParams.dataArray.map(t => {
            return t.contactName === data.contactName
              ? data
              : t;
          });
          this.reload()
        }
        this.submitForm()
      },
      submitForm(){

        this.dialogFormVisible=false
      },
      handleOperation(rowIndex, row, methodName) {
        this.formRow=row;
        if(methodName  == "delete"){
          this.tips.ConfirmModal('确认要删除这一个名字为【' + row.contactName + '】联系人吗？',()=>{
            this.tableParams.dataArray.splice(rowIndex,1)
          })
        }else if (methodName  == "update"){
          this.action="edit";
          this.edit(this.action)
        }
      },
      addContact(){
        this.action = "add";
        if(this.action == "add" ){
          // this.tableParams.dataArray.forEach(ele=>{
          //     for(let key in ele){
          //       ele[key] = null
          //     }
          // })
          this.dialogTitle='新增联系人信息'
          this.dialogFormVisible=true
        }
      },
      edit(val){
        if(val == "edit"){
          this.dialogTitle= "编辑联系人信息";
          this.dialogFormVisible=true
          this.searchForm.formItemArray.forEach(item=>{
            for(let key in this.formRow){
              if(item.prop === key){
                item.value = this.formRow[key]
              }
            }
          })
        }
      },
      getTemplateRow(index,row){
        this.addContactData=row
        this.addContactData.setDefault=true
        //选择的话 选择的setDefault为true，其他的为false
        for (let val of this.tableParams.dataArray){
           if(row.id  !== val.id){
              val.setDefault=false
           }
        }
      },
      saveSupplierInfo(){
        let para=this.editSupplyInfo
        for(let item of this.tableParams.dataArray){
          Object.values(item).forEach(ele=>{
            if(ele == undefined || ele == null  || ele == ""){
              ele =null
            }
          })
        }
        para['contactInfos'] =this.tableParams.dataArray

        // console.log(para,"参数")
        let succ=data=>{
          if(data.statusCode  === "1"){
            this.$message.success("保存成功")
            this.$router.go(-1)
          }else{
            this.$message.error(data.statusMessage)
          }
        }
        this.api.supplierUpdate(para,succ)
      },

      cancelSupplyAdd(){
        this.$router.go(-1)
      },
      onChangeProvince(province){
        this.editSupplyInfo.companyProvince=province.value
      },
      onChangeCity(city){
        this.editSupplyInfo.companyCity=city.value
      },
      onChangeArea(district){
        this.editSupplyInfo.companyDistrict=district.value
        this.editSupplyInfo.companyAddress=this.editSupplyInfo.companyProvince + this.editSupplyInfo.companyCity+this.editSupplyInfo.companyDistrict
      },
      handlePictureCardPreview(){

      },
      handleRemove(){

      },
    }
  }
</script>
<style scoped>
  .supply-info-container-edit .el-button--mini.is-circle{
    padding:1px;
  }
   .btnSub{
    text-align: right !important;
  }
</style>
<style lang="scss" scoped>
  .supply-info-container-edit{
    .supply-nature{
      background: #fff;
      margin:3px 0;
      height:45px;
      line-height: 45px;
      border-left: 2px solid #e8e8e8;
      border-right: 2px solid #e8e8e8;
      border-bottom: 2px solid #e8e8e8;
      span{
        font-size: 16px;
        width: 90px;
        text-align: center;
        display: inline-block;
      }
    }
    .supply-info{
      background: #fff;
      height:160px;
      .info{
        line-height:45px;
        span{
          color: #606266;
          font-size: 15px;
        }
      }
      .supply-info-fileds{

      }

    }
    .supply-List{
      background: #fff;
      margin-top: 3px;
      .info{
        line-height:60px;
        span{
          color: #606266;
          font-size: 15px;
        }
      }
      .btn{
        padding:10px 5px;
      }
    }
    .supply-Account{
      background: #fff;
      margin-top: 3px;
      .info{
        line-height:60px;
        span{
          color: #606266;
          font-size: 15px;
        }
      }
    }
    .supply-card{
      background: #fff;
      margin-top: 3px;
      .info{
        line-height:60px;
        span{
          color: #606266;
          font-size: 15px;
        }
      }
      .supply-upload{
        padding: 10px;
      }
    }
    .supply-btn{
      width: 100%;
      text-align: center;
      padding-top: 20px;
    }
  }
</style>
